<!DOCTYPE html	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" xmlns:sdu="http://sduept.com/jsf/cc">
<h:head>
	<link href="/css/primefaces/menubase.css" rel="stylesheet"
		type="text/css" />
	<title>评价模板选择</title>
	<style type="text/css">
.value {
	font-weight: bold;
}

.ui-tree {
	width: 100%;
	position: relative;
	height: 400px;
	overflow-y: scroll;
}

.ui-panelgrid .ui-panelgrid-cell {
	border-width: 0px;
}

.ui-widget-content .ui-inputfield {
	font-weight: normal;
	width: 30px
}

.expertSelectorTitle {
	color: #555;
	/* background-color: #fff; */
	font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial,
		sans-serif;
	font-weight: 600;
	font-size: 16px;
	padding: 10px 15px;
	line-height: 1.42857143;
}

.ui-g-6 {
	border: 1px solid #d5d5d5;
	border-radius: 3px;
	width: 49.5%;
}

.ui-g-12 {
	border: 1px solid #d5d5d5;
	border-radius: 3px;
}
.ui-selectonemenu {
    display: inline-block;
    position: relative;
    width: auto;
    zoom: 1;
    cursor: pointer;
    padding-right: 2em;
    vertical-align: top;
    width: 200px;
    min-width: 200px !important;
}
.ui-selectonemenu-panel {
    position: absolute;
    height: auto;
    width: 230px;
}
</style>
<script>
	/*关闭该弹窗并返回数据*/
	function closeAndSave(data) {
		//将对象转为JSON字符串
		data = JSON.stringify(data);
		/* alert(data); */
		var index = parent.layer.getFrameIndex(window.name);
		if (parent.dialogReturn) {
			parent.dialogReturn(index, data);
		}
		parent.layer.close(index);
	}
</script>
</h:head>

<h:body>
		<div class="ui-g">
			<div class="ui-g-12" style="margin-bottom:5px">
				<h:form id="templateForm">
				<p:growl id="msgs" showDetail="true" />
				<p:toolbar id="toolbar">
		        	<f:facet name="right">
		        		<h:outputText style="color:blue" value="模板选择：" />
		        		<p:selectOneMenu value="#{selectFromTemplateController.selectedTempletId}">
							<f:selectItem itemLabel=""/>
							<f:selectItems value="#{selectFromTemplateController.templateList}" var="temp" itemLabel="#{temp.name}" itemValue="#{temp.id}"/>
							<p:ajax event="itemSelect" update="stationTreeForm:stationTree templateForm" 
								listener="#{selectFromTemplateController.handleTempletSelect()}"/>
						</p:selectOneMenu>
		        	</f:facet>
		        	<f:facet name="left">
		        		<p:commandButton value="保存" actionListener="#{selectFromTemplateController.saveAndClose()}" />
		        	</f:facet>
		        </p:toolbar>
				 <p:panelGrid cellpadding="5" style="width:100%;font-size:14px">
			        <p:row style="border:0;background: #ccc;">
			        	<p:column>
			        		<p:selectBooleanCheckbox value="#{selectFromTemplateController.auto}" itemLabel="一键分配" >
			        			<p:ajax event="change" listener="#{selectFromTemplateController.handleAuto}" 
			        				update="expertTreeForm:expertTree stationTreeForm:stationTree templateForm" />
			        		</p:selectBooleanCheckbox>
			        		<p:selectBooleanCheckbox style="margin-left:10px" value="#{selectFromTemplateController.manual}" itemLabel="手动分配" >
			        			<p:ajax event="change" listener="#{selectFromTemplateController.handleManual}" 
			        				update="expertTreeForm:expertTree stationTreeForm:stationTree templateForm" />
			        		</p:selectBooleanCheckbox>
			        	</p:column>
			        	<p:column style="float:right">
			        		<p:commandButton value="确定" actionListener="#{selectFromTemplateController.allot()}"
			        			update="stationTreeForm:stationTree templateForm:msgs templateForm:toolbar"/>
			        	</p:column>
			        </p:row>
			        <!-- <p:row style="border:0">
			        	<p:column>
			        		<p:selectBooleanCheckbox value="true" itemLabel="每个评价厂站的专家数：" />
			        		<p:spinner style="margin-left:10px" min="1" max="#{selectFromTemplateController.getExpertCeil()}"
								value="#{selectFromTemplateController.expertNum}" />
			        	</p:column>
			        	<p:column></p:column>
			        </p:row> -->	
			      </p:panelGrid>
				</h:form>
			</div>
		</div>
		<div class="ui-g">
			<div class="ui-g-6" style="margin-right:1%">
				<h:outputText class="expertSelectorTitle" value="评价专家"></h:outputText>
				<h:form id="expertTreeForm" style="font-size:14px">
					<p:toolbar>
					</p:toolbar>
					<p:tree id="expertTree" widgetVar="expertTree" dynamic="true" 
						animate="true" var="node" style="border:0"
						value="#{selectFromTemplateController.expertRoot}"
						selectionMode="checkbox" selection="#{selectFromTemplateController.selectedExpertNodes}" >
						<p:ajax event="select" listener="#{selectFromTemplateController.onExpertNodeSelect}" update="templateForm"/>
						<p:ajax event="unselect" listener = "#{selectFromTemplateController.onExpertNodeUnSelect}" update="templateForm"></p:ajax>
						<p:ajax event="collapse" />
						<p:treeNode type="deptRoot" icon="fa fa-home">
							<h:outputText value="#{node}" />
						</p:treeNode>
						<p:treeNode type="dept" icon="fa fa-home">
							<h:outputText value="#{node}" />
						</p:treeNode>
						<p:treeNode type="expert" icon="fa fa-user">
							<h:outputText value="#{node}" />
						</p:treeNode>
					</p:tree>
				</h:form>
			</div>
			<div class="ui-g-6">
				<h:outputText class="expertSelectorTitle" value="评价厂站"></h:outputText>
				<h:form id="stationTreeForm" style="font-size:14px">
					<p:toolbar>
					</p:toolbar>
					<p:tree value="#{selectFromTemplateController.stationRoot}" var="node"
						dynamic="true" id="stationTree" widgetVar="stationTree" animate="true"
						selection="#{selectFromTemplateController.selectedStationNodes}"
						selectionMode="checkbox" style="border:0">
						<p:ajax event="select" listener="#{selectFromTemplateController.onStationNodeSelect}" update="templateForm"/>
						<p:ajax event="unselect" listener="#{selectFromTemplateController.onStationNodeUnSelect}" update="templateForm"/>
						<p:ajax event="collapse" />
						<p:treeNode type="deptRoot">
							<h:outputText value="#{node}" />
						</p:treeNode>
						<p:treeNode type="dept" icon="fa fa-home">
							<h:outputText value="#{node}" />
						</p:treeNode>
						<p:treeNode type="station">
							<h:outputText value="#{node}" />
							<h:outputText style="color:blue" value="#{selectFromTemplateController.getExpertListStr(node.id)}" />
						</p:treeNode>
					</p:tree>
				</h:form>
			</div>
		</div>
	</h:body>
	
</html>
